<template>
  <div class="deteTime">
    
  <div>{{ formattedTime }}</div>
  <div>{{ formattedDay }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const formattedDay = ref("");
const formattedTime = ref("");

function updateTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const date = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");

  formattedDay.value = `${year}-${month}-${date} `;
  formattedTime.value = `${hours}:${minutes}`;
}

let timer = null;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 60000); // 每秒更新一次
});

onUnmounted(() => {
  clearInterval(timer); // 组件注销时销毁定时器
});
</script>

<style scoped>
/* 可根据需要添加样式 */
.deteTime {
  font-weight: 400;
font-size: 12px;
color: #FFFFFF;
text-align: center;
width:72px;
margin-top: 8px;
margin-left: 50px;
}
</style>
